@import 'common';

.ding {
    img {
        width: 100%;
    }
}

body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #fff;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@fz: 50;

li {
    list-style: none;
}

header {
    margin-top: 15rem/@fz;
    height: 88rem/@fz;
    width: 15rem;

    ul {
        height: 88rem/@fz;
        padding: 0 38rem/@fz;
        display: flex;
        align-items: center;

        li {
            flex: 1;
            height: 88rem/@fz;
            background-color: #FDDF00;
            text-align: center;
            line-height: 88rem/@fz;

            &:nth-child(2) {
                margin: 0 30rem/@fz;
            }

            border-radius: 8rem/@fz;
            font-size: 28rem/@fz;

            &:hover {
                background-color: #003A9B;
                color: #fff;
            }
        }
    }
}

.tuijan {
    display: flex;
    height: 116rem/@fz;
    // line-height: 116rem/@fz;
    padding: 0 38rem/@fz;
    align-items: center;

    .tuijan_hd {
        font-size: 40rem/@fz;
    }

    .right {
        font-size: 24rem/@fz;
        color: #666;
        margin-left: 20rem/@fz;
        // line-height: 100rem/@fz; 
    }
}

.goods {
    padding: 0 38rem/@fz;
    height: 315rem/@fz;
    display: flex;

    flex-wrap: wrap;

    .kuang {
        flex: 1;

        border-radius: 20rem/@fz;
        border: 1px solid #e7e7e7;

        &:nth-child(2) {
            margin: 0 20rem/@fz;
        }

        a {
            display: block;
            color: #000;

            .tu {
                background-color: #f9f9fb;
                height: 142rem/@fz;
                width: 100%;
                text-align: center;

                img {
                    height: 142rem/@fz;
                }
            }

            .c {
                padding: 0 8rem/@fz;
                height: 30rem/@fz;

                img {
                    // position: relative;
                    // top: -20rem/@fz;
                    // float: left;
                    display: block;
                    height: 25rem/@fz;

                }
            }

            p {
                padding: 0 8rem/@fz;
                font-size: 24rem/@fz;
                // margin: 0;
                margin-top: 5rem/@fz;
            }

            .di {
                height: 60rem/@fz;
                padding: 0 14rem/@fz;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    font-size: 24rem/@fz;
                }

                img {
                    height: 44rem/@fz;
                }
            }
        }
    }

    .dkuang {
        flex: 45%;

        border-radius: 20rem/@fz;
        border: 1px solid #e7e7e7;
        margin-top: 20rem/@fz;

        &:nth-child(even) {
            margin-right: 20rem/@fz;
        }


        a {
            display: block;
            color: #000;

            .tu {
                background-color: #f9f9fb;
                height: 142rem/@fz;
                width: 100%;
                text-align: center;

                img {
                    height: 142rem/@fz;
                }
            }

            .c {
                padding: 0 8rem/@fz;
                height: 30rem/@fz;

                img {
                    // position: relative;
                    // top: -20rem/@fz;
                    // float: left;
                    display: block;
                    height: 25rem/@fz;

                }
            }

            p {
                padding: 0 8rem/@fz;
                font-size: 24rem/@fz;
                // margin: 0;
                margin-top: 5rem/@fz;
            }

            .di {
                height: 60rem/@fz;
                padding: 0 14rem/@fz;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    font-size: 24rem/@fz;
                }

                img {
                    height: 44rem/@fz;
                }
            }
        }
    }
}